<script setup lang="ts">
import { Page, PageIn } from '$/client'
import { getGenderText } from '$/vexip/presets'
import ComCtl from '@/components/ComCtl.vue'
import NPagination from '@/components/packaging/NPagination.vue'
import { uurls } from '@/router/urls'
import { Stars } from '@/scripts/client-user'
import { DoorOpen as IDoorOpen } from '@vexip-ui/icons'
import { useRequest } from 'alova/client'
import {
  Divider,
  Button as VButton,
  Card as VCard,
  Carousel as VCarousel,
  CarouselItem as VCarouselItem
} from 'vexip-ui'
import { ref } from 'vue'

const params = ref(PageIn.inst())

const {
  loading: refreshing,
  data: page,
  send: refresh
} = useRequest(() => Stars.list(params.value), {
  initialData: Page.inst()
})

const carousels = ref(['/carousel/1.jpg', '/carousel/2.jpg', '/carousel/3.jpg', '/carousel/4.jpg', '/carousel/5.jpg'])
</script>

<template>
  <ComCtl content-class="flex flex-col gap-4" :loading="[refreshing]">
    <div class="flex justify-center items-center pt-10">
      <VCarousel arrow="inside" :view-size="1" :autoplay="3000" loop>
        <VCarouselItem v-for="(n, index) in carousels" :key="index">
          <img class="mx-auto rounded-2xl h-[200px] sm:h-[300px] md:h-[400px]" :src="n" />
        </VCarouselItem>
      </VCarousel>
    </div>
    <Divider />
    <div class="flex gap-2">
      <NPagination v-model="params" @change="refresh" :total="page.total" />
    </div>
    <div class="card-container">
      <VCard
        v-for="i in page.content"
        class="transition-all duration-400 hover:shadow-[0px_0px_10px_3px] shadow-white"
        :key="i.id"
        :title="i.name"
      >
        <template #extra>
          <div>性别：{{ getGenderText(i.gender) }}</div>
        </template>
        <div class="flex flex-col gap-1">
          <div class="justify-center flex">
            <img v-if="i.avatar" class="size-[150px] object-cover rounded-2xl bg-white" :src="i.avatar" alt="" />
            <div class="size-[150px] object-cover rounded-2xl b-dashed" v-else></div>
          </div>
          <div>备注：{{ i.description }}</div>
          <div class="flex justify-between items-center">
            <div>点击进入详情页</div>
            <VButton
              @click="$router.push({ path: uurls.copilotDetail, query: { copilot: i.id } })"
              :icon="IDoorOpen"
              text
            />
          </div>
        </div>
      </VCard>
    </div>
  </ComCtl>
</template>

<style scoped>
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.card-container-md {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
</style>
